<template>
  <div>
    <div class="row">
      <div class="col-2">
      </div>
      <div class="col-7">
        <h3 class="text-center mb-3 font-weight-bold word-width">
          <p>孟子</p>
          <small class="text-muted font-italic"></small>
        </h3>
        <div>
          <ul class="list-unstyled text-small text-center word-width list-group">
            <li class="text-left list-group-item list-group-flush" v-for="itm in subDataMsg.paragraphs">{{itm}}</li>
          </ul>
        </div>
      </div>
      <div class="col-3"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'MengZi',
    data () {
      return {
        idx: -1,
        subDataMsg: {},
        dataMsg: [
          {
            'chapter': '梁惠王上',
            'paragraphs': [
              '孟子見梁惠王。王曰：「叟不遠千里而來，亦將有以利吾國乎？」',
              '孟子對曰：「王何必曰利？亦有仁義而已矣。王曰『何以利吾國』？大夫曰『何以利吾家』？士庶人曰『何以利吾身』？上下交征利而國危矣。萬乘之國弒其君者，必千乘之家；千乘之國弒其君者，必百乘之家。萬取千焉，千取百焉，不為不多矣。苟為後義而先利，不奪不饜。未有仁而遺其親者也，未有義而後其君者也。王亦曰仁義而已矣，何必曰利？」',
              '孟子見梁惠王，王立於沼上，顧鴻鴈麋鹿，曰：「賢者亦樂此乎？」',
              '孟子對曰：「賢者而後樂此，不賢者雖有此，不樂也。《詩》云：『經始靈臺，經之營之，庶民攻之，不日成之。經始勿亟，庶民子來。王在靈囿，麀鹿攸伏，麀鹿濯濯，白鳥鶴鶴。王在靈沼，於牣魚躍。』文王以民力為臺為沼。而民歡樂之，謂其臺曰靈臺，謂其沼曰靈沼，樂其有麋鹿魚鼈。古之人與民偕樂，故能樂也。《湯誓》曰：『時日害喪？予及女偕亡。』民欲與之偕亡，雖有臺池鳥獸，豈能獨樂哉？」',
              '梁惠王曰：「寡人之於國也，盡心焉耳矣。河內凶，則移其民於河東，移其粟於河內。河東凶亦然。察鄰國之政，無如寡人之用心者。鄰國之民不加少，寡人之民不加多，何也？」',
              '孟子對曰：「王好戰，請以戰喻。填然鼓之，兵刃既接，棄甲曳兵而走。或百步而後止，或五十步而後止。以五十步笑百步，則何如？」',
              '曰：「不可，直不百步耳，是亦走也。」'
            ]
          },
          {
            'chapter': '梁惠王下',
            'paragraphs': [
              '莊暴見孟子，曰：「暴見於王，王語暴以好樂，暴未有以對也。」曰：「好樂何如？」',
              '孟子曰：「王之好樂甚，則齊國其庶幾乎！」',
              '他日，見於王曰：「王嘗語莊子以好樂，有諸？」王變乎色，曰：「寡人非能好先王之樂也，直好世俗之樂耳。」',
              '曰：「王之好樂甚，則齊其庶幾乎！今之樂猶古之樂也。」曰：「可得聞與？」',
              '曰：「獨樂樂，與人樂樂，孰樂？」曰：「不若與人。」',
              '曰：「與少樂樂，與眾樂樂，孰樂？」曰：「不若與眾。」'
            ]
          }
        ]
      }
    },
    computed: {
      dataMessage () {
        return this.$store.getters.dataMsg
      }
    },
    watch: {
      dataMessage () {
        this.dataMsg = this.$store.getters.dataMsg
        this.subDataMsg = this.dataMsg[0]
        this.idx = 0
      },
      idx () {
        this.subDataMsg = this.dataMsg[this.idx]
      }
    },
    mounted: function () {
      if (!this.$store.getters.dataMsg) {
        this.changeUrl()
      }
      this.idx = 0
    },
    methods: {
      changeUrl () {
        let url = '/sishuwujing/mengzi.json'
        this.queryDate(url)
      },
      queryDate: function (url) {
        this.$store.dispatch('loadDataMsg', url)
      },
      changeIndex (idx) {
        this.idx = idx
      }
    }
  }
</script>
<style scoped>
  .word-width {
    letter-spacing: 8px;
  }
</style>
